<template>
  <div class="home">
    <Swiper />
    <!-- <p class="songListTitle">歌单推荐</p> -->
    <div class="songListContent">
      <div class="leftPic" @click="$router.push('/song-list'),$store.commit('setActiveName','歌单')">
        <img src="../assets/img/songListPic_left.jpeg" alt="">
        <div class="bg"></div>
        <p class="all">全部歌单</p>
        <div class="slicon">
          <svg class="icon">
              <use xlink:href="#icon-bofang"></use>
          </svg>
        </div>
      </div>
      <div class="rightSongList">
        <div class="title">
          <span v-for="item in songListStyle" :key="item.id" @click="getStyleSongList(item)" :class="{spanActive:spanActive==item}">{{ item }}</span>
        </div>
        <div class="content">
          <div class="songListItem" v-for="item in songStyleList" :key="item.id" @click="toSongListDetail(item.id)">
            <div class="img">
              <img :src="attachImageUrl(item.pic)" alt="">
            </div>
            <div class="info">
              <p style="font-size: 18px; font-weight: 600;">{{ item.title }}</p>
              <p style="font-size: 16px; color: #999;">{{ item.introduction }}</p>
              <div class="count">
                <svg class="icon" style="color: #fc3e7e">
                    <use xlink:href = "#icon-erji"></use>
                </svg>
                {{ item.listenCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section" v-for="(item,index) in songsList" :key="index">
      <div class="section-title">{{item.name}}</div>
      <content-list :contentList="item.list"></content-list>
    </div>
  </div>
</template>

<script>
import Swiper from "../components/Swiper";
import contentList from '../components/ContentList';
import {getAllSinger,getAllSongList,getSongListOfLikeStyle} from '../api/index';
import {mixin} from '../mixins/index'
export default {
  name: 'home',
  components: {
    Swiper,
    contentList
  },
  mixins:[mixin],
  data () {
    return {
      songsList: [
        {name:"热门歌手",list: []}
      ],
      songListStyle:[
        '华语',
        '欧美',
        '日韩'
      ],
      spanActive:'',
      songStyleList:[]
    }
  },
  created () {
    this.spanActive=this.songListStyle[0]
   this.getSongList();
   this.getSinger();
   this.getStyleSongList(this.songListStyle[0]);
  },
  watch:{

  },
  methods: {
    getSongList(){                      //获取前十条歌单
      getAllSongList().then((res) => {
        this.songsList[1].list = res.slice(0,10); // 截取从第0到第10的值 但不包含第10
      }).catch((err) => {
        console.log(err);
      })
    },
    getSinger(){                      //获取前十名歌手
      getAllSinger().then((res) => {
        // console.log(res,'歌手列表');
        this.songsList[0].list = res.slice(10,20);
      }).catch((err) => {
        console.log(err);
      })
    },
    getStyleSongList(val){
      getSongListOfLikeStyle(val).then(res=>{
        // console.log(res,'歌曲分类列表');
        this.songStyleList=res.slice(0,6)
        this.spanActive=val
      })
    },
    toSongListDetail(id){
      this.$router.push({path:`/song-list-album/${id}`});
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/home.scss';
</style>
